import React, { useState } from 'react';
import { marked } from 'marked';
import Editor from 'for-editor';
import HTMLPreviewModal from '../../component/HTMLPreviewModal';
import hljs from 'highlight.js';
import './index.less';

// 配置marked
const renderer = new marked.Renderer();
// 配置链接，点击链接时，打开新的浏览器窗口
renderer.link = function (href, title, text) {
    return `<a target="_blank" href="${href}" title="${title}">${text}</a>`;
};
marked.setOptions({
    renderer: renderer,
    highlight: function (code, lang) {
        const language = hljs.getLanguage(lang) ? lang : 'plaintext';
        return hljs.highlight(code, { language }).value;
    },
    langPrefix: 'hljs language-', // highlight.js css expects a top-level 'hljs' class.
    pedantic: false,
    gfm: true,
    breaks: false,
    sanitize: false,
    smartLists: true,
    smartypants: false,
    xhtml: false,
});

export default function Evaluate() {
    const [mdContent, setMdContent] = useState('');
    const [previewHTMLContent, setPreviewHTMLContent] = useState('');
    function handleEditorChange(value: string) {
        setMdContent(value);
        const html = marked(value);
        setPreviewHTMLContent(html);
    }

    return (
        <div className="evaluate">
            <div className="select">
                <div className="selectCourse">
                    <label htmlFor="selectCourse">选择课程</label>
                    <input type="text" id="selectCourse" placeholder="请输入你要评教的课程" />
                </div>
                <div className="selectTeacher">
                    <label htmlFor="selectTeacher">填写老师</label>
                    <input type="text" id="selectTeacher" placeholder="请输入你要评教的老师" />
                </div>
                <button>保存</button>
            </div>
            <div className="edit">
                <div className="left-edit">
                    <Editor value={mdContent} onChange={handleEditorChange} />
                </div>
                <div className="right-pre">
                    <HTMLPreviewModal content={previewHTMLContent} />
                </div>
            </div>
        </div>
    );
}
